<template>
  <el-dialog
    v-model="visibility"
    width="60%"
    :title="config.button.text.view"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item label="资金仓库名称"> {{ props.rowData.baseCapitalWarehouseName }} </el-descriptions-item>
      <el-descriptions-item label="商品名称"> {{ props.rowData.goodsName }} </el-descriptions-item>
      <el-descriptions-item label="购买吨数"> {{ props.rowData.buyTon }} </el-descriptions-item>
      <el-descriptions-item label="已提货吨数"> {{ props.rowData.pickTon }} </el-descriptions-item>
      <el-descriptions-item label="司机名字"> {{ props.rowData.driverName }} </el-descriptions-item>
      <el-descriptions-item label="司机电话"> {{ props.rowData.driverPhoneNumber }} </el-descriptions-item>
      <el-descriptions-item label="车牌号"> {{ props.rowData.carNumber }} </el-descriptions-item>
      <el-descriptions-item label="司机身份证号"> {{ props.rowData.driverIdCard }} </el-descriptions-item>
      <el-descriptions-item label="商品名称"> {{ props.rowData.goodsName }} </el-descriptions-item>
      <el-descriptions-item label="创建人"> {{ props.rowData.createUserRealName }} </el-descriptions-item>
      <el-descriptions-item label="创建时间"> {{ formatDateTime(props.rowData.createTime) }} </el-descriptions-item>
      <el-descriptions-item label="修改人"> {{ props.rowData.updateUserRealName }} </el-descriptions-item>
      <el-descriptions-item label="上次修改时间"> {{ formatDateTime(props.rowData.updateTime) }} </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div>
        <el-button
          type="warning"
          v-if="appStore.isPhone"
          @click="editInfo">
          提货
        </el-button>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import config from "@/common/element-plus/config";
import { useAppStore } from "@/stores/app"
import { formatDateTime } from "@/common/utils/date";
import { validateButtonPermission } from "@/common/utils/validate";
import { useRoute } from "vue-router"

const route = useRoute()
const appStore = useAppStore()

const visibility = ref(false)

const props = defineProps(["rowData"])

const emits = defineEmits(["editInfo"])
const editInfo = () => {
  visibility.value=false;
  emits("editInfo",props.rowData);
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  width: 124px;
}
</style>